<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue_basic</title>
<!--    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="root">
        <h1>你好，{{name}}</h1>           <!-- 插值语法，标签体内使用-->
        <h1>{{Date.now()}}</h1>         <!--表达式获取当前时间-->
        <h1>{{english.toUpperCase()}}</h1> <!--表达式转换大写-->
        <h1>指令语法，
            <a :href="url.toUpperCase()">将百度链接大写并，跳转至百度</a>  <!--v-bind 单向绑定，可以给任何属性使用，指定的属性内容变为表达式   可简写为： ，指令语法：可用于解析标签 包括标签属性，标签内容，绑定事件-->
        </h1>
        <h1>多级结构读取对象：{{ob.name}}</h1>
        单项数值绑定: <input type="text" :value="name"/>
        <!--双向数值绑定: <input type="text" v-model:value="mode">  &lt;!&ndash;model只能绑定在表单类元素  单选，多选，select,多行输入，一般绑定在value上&ndash;&gt;-->
        <!--简写-->
        <input type="text" v-model="mode">
    </div>


    <!-- 解析模板，扫描Vue语法，替换整个容器 -->
    <script type="text/javascript">
        //阻止vue在启动时生成提示
        Vue.config.productionTip= false
        let number =20
        let person ={
            name : "蒋涛",
            sex : "男"
        }
        // 不可枚举
        Object.defineProperty(person,'age',{
            // value:18,
            // enumerable:true,  //控制是否可枚举，默认为false
            // writable: true,    //控制是否被修改，默认为false
            // configurable:true //控制是否可删除，默认为false
            //当有人读取person时，getter函数（get）就会被调用,且返回为get
            // get:function() 可简写为get()
            get(){
                return number
            },
            //当有人修改person时，setter函数（set）就会被调用,且会受到修改的值
            // set:function() 可简写为set()
            set(value){
                number = value
                console.log("有人调用了set，且值为",value)
            }
        })  
        //console.log(Object.keys(person))   //遍历得到
        // console.log(person)
        // for (let key in person) {
        //     console.log(person[key])
        // }
        //创建Vue实例对象
        new Vue({
            el:'#root',  //el指定当前Vue为哪个容器服务,值通常为css选择器字符串
            //对象式  data中存储数据，数据供el所指定的容器使用
            /*data:{
                name:'Vue',
                english:'english',
                url:'www.baidu.com',
                ob:{
                    name:'对象'
                },
                mode:'双向绑定',
            }*/
            //函数式  返回值的方式
            data:function(){
                console.log('this',this)  //此处的window是Vue的实例对象 ，箭头函数没有this，所有会往回找
                return{
                    name:'Vue',
                    english:'english',
                    url:'www.baidu.com',
                    ob:{
                        name:'对象'
                    },
                    mode:'双向绑定',
                }
            }
        })

        //等待程序
        //setTimeout(()=>{
           //tem.$mount('#root')   <!--等1s后指定容器   $mount 挂载-->
        //},1000)
    </script>

</body>
</html>